<template>
    <div class="dashboard-header">
      <div class="filters">
        <select id="department">
          <option value="all">全部机构</option>
        </select>
        <select id="year">
          <option value="2024">2024年</option>
          <option value="2023">2023年</option>
          <option value="2022">2022年</option>
        </select>
      </div>
  
      <h1 class="main-title">人事薪酬系统可视化大屏</h1>
  
      <div class="time-display">
        <span class="time">{{ currentTime }}</span>
        <span class="date">{{ currentDate }}</span>
      </div>
    </div>
</template>
  
<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const currentTime = ref('--:--:--');
  const currentDate = ref('---- -- -- 星期-');
  let timer: number | null = null;
  
  const updateTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
  
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
  
    currentTime.value = `${hours}:${minutes}:${seconds}`;
    currentDate.value = `${year}-${month}-${day} ${week}`;
  };
  
  onMounted(() => {
    updateTime(); // Initial call
    timer = window.setInterval(updateTime, 1000); // Use window.setInterval for type inference
  });
  
  onUnmounted(() => {
    if (timer !== null) {
      clearInterval(timer);
    }
  });
  </script>
  
  <style lang="less" scoped>
  @import '@/styles/variables.less';
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @grid-gap;
    padding: 0 @base-padding; // Match original header padding
  }
  
  .filters select {
    background-color: rgba(4, 35, 84, 0.8);
    color: @text-color-light;
    border: 1px solid #0a5299;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 10px;
    outline: none;
    font-size: 14px;
  }
  
  .main-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: @text-color-light;
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
    background: linear-gradient(90deg, rgba(0, 51, 153, 0), rgba(0, 153, 255, 0.5), rgba(0, 51, 153, 0));
    padding: 10px 0;
    flex-grow: 1;
    margin: 0 20px;
    border-top: 1px solid rgba(0, 195, 255, 0.4);
    border-bottom: 1px solid rgba(0, 195, 255, 0.4);
  }
  
  .time-display {
    font-weight: bold;
    color: @text-color-light;
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  
    .time {
      font-size: 20px;
    }
    .date {
      font-size: 12px;
      color: @text-color; // Use variable
    }
  }
  </style>